<template>
  <view class="start">
    <view class="input-view">
        <textarea v-model="userInput" placeholder="请输入内容" class="user-input" />
        <fui-radio-group name="radio" v-model="val">
          <view class="fui-list__item">
            <fui-label>
              <view class="fui-align__center">
                <fui-radio value="1" checked></fui-radio>
                <text class="fui-text">明文</text>
              </view>
            </fui-label>
            <fui-label :margin="['0','0','0','40rpx']">
              <view class="fui-align__center">
                <fui-radio value="2"></fui-radio>
                <text class="fui-text">密文</text>
              </view>
            </fui-label>
          </view>
        </fui-radio-group>
    </view>

    <view class="commit" @click="commit" :class="sizeStatus ? 'commit-big' : 'commit-small'" ></view> 
    <LandscapeModel v-model:show="show" :sonFun="sonFun"/>
  </view>
</template>

<script setup lang="ts">
import LandscapeModel from "@/components/Landscape/LandscapeModel.vue";
import { EnumStatus } from "@/utils/constants";
import dyUserPlayingService from "@/api/dyUserPlayingService";
import { password } from "@/utils/ab";
const sizeStatus = ref(false)
const show = ref(false)
const emit = defineEmits(['update:defStatus','update:content'])
const userInput = ref()
const val =ref("1")
const sonFun = async()=>{
    const data = await password(userInput.value,val.value)
    emit('update:defStatus',EnumStatus.RESULT)
    emit('update:content',[val.value === "1" ? data : userInput,val.value === "1" ? userInput : data ,val.value])
}


const startTimer = () => {
    setInterval(() => {
        sizeStatus.value =  !sizeStatus.value
    }, 1000); // 每秒执行一次
  };

  const commit = async ()=>{
    if(!userInput.value){
        uni.showToast({
        title: "请输入内容",
        duration: 2000,
        icon:"none"
      });
      return
    }
    uni.showLoading({
        title: "加载中",
        icon: "none",
    });
    // 敏感词校验
    const {result}  = await dyUserPlayingService.sensitiveWord({word:userInput.value})
    if(result){
        uni.hideLoading()
        uni.showToast({
            title: '存在敏感词,请重新填写',
            duration: 2000,
            icon:"none"
        });
        return
    }
    uni.hideLoading()
    show.value = true
}

onMounted(()=>{
      startTimer()
  })
</script>

<style lang="scss" scoped>
.start{

    .commit{
      z-index: 102;
      position: absolute;
      top: 80%;
      width: 46%;
      height: 100rpx;
      left: 27%;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      background-image: url("http://img-miniprogram-o.doutuimao.net/lovesc/common/2022/08/16/2022081611073183434486.png")
    }
    .input-view{
        z-index: 102;
        position: absolute;
        top: 45%;
        left: 18%;
        width: 64%;
        font-size: 26rpx;
        .user-input{
            background: white;
            margin-top: 5%;
            height: 300rpx;
            width: 98%;
            border-radius: 8rpx;
            border: 1rpx solid black;
            box-shadow: 0  4rpx 4rpx rgba(0, 0, 0, 1); /* 设置黑色阴影 */
            font-size: 28rpx;
            padding:20rpx;
        }
        .fui-list__item{
          display: flex;
          color: white;
          margin-top: 20rpx;
          .fui-text{
            margin-left: 10rpx;
          }
        }
    }

    .commit-big{
      width: 50%;
      height: 105rpx;
      left: 25%;
      transition: all 1s;
  }
  .commit-small{
      width: 46%;
      height: 100rpx;
      left: 27%;
      transition: all 1s;
  }
}

</style>
